import React from 'react'
import css from './style.less'

class ColMatchItem extends React.Component {
  state = {
    x: 0
  }
  componentDidMount() {
    // console.log('componentDidMount================= ')
    // console.log('this.footer', this.footer)
    // console.dir(this.footer)
    // console.dir(this.footer.parentElement.parentElement.children[0])
    // let contentElement = this.footer.parentElement.parentElement.children[0];
    // let targetColumn = contentElement.querySelector('.special5');
    // let offsetLeft = targetColumn.offsetLeft;
    // this.setState({ // eslint-disable-line
    //   x: offsetLeft
    // })
    // contentElement.addEventListener('scroll', () => {
    //   console.log('scroll scroll')
    //   this.setState({
    //     x: offsetLeft - contentElement.scrollLeft
    //   })
    // })
    // const contentElement = this.footerItem.parentElement.parentElement.previousElementSibling;
    // console.dir('ColMatchItem ColMatchItem ColMatchItem', contentElement)
    const { scrollLeft } = this.props
    const targetColElement = this.getTargetColElement()
    // this.setState({ // eslint-disable-line
    //   x: this.targetColElement.offsetLeft - scrollLeft
    // })
    this.setItemWidth(targetColElement.clientWidth)
    this.computeX(targetColElement.offsetLeft, scrollLeft)
  }
  componentWillReceiveProps(nextProps) {
    const targetColElement = this.getTargetColElement()
    this.computeX(targetColElement ? targetColElement.offsetLeft : -10000, nextProps.scrollLeft)
    this.setItemWidth(targetColElement ? targetColElement.clientWidth : 0)
  }
  getTargetColElement = () => {
    const contentElement = this.footerItem.parentElement.parentElement.previousElementSibling;
    return contentElement.querySelector('.' + this.props.targetColClass)
  }
  setItemRef = (element) => {
    this.footerItem = element
  }
  setItemWidth = (width) => {
    this.setState(() => {
      return {
        width
      }
    })
  }
  computeX = (offsetLeft, scrollLeft) => {
    this.setState(() => ({
      x: offsetLeft - scrollLeft
    }))
  }
  render() {
    const { style } = this.props
    return (
      <div
        ref={this.setItemRef}
        className={css.colMatchItem}
        style={{
          WebkitTransform: `translateX(${this.state.x}px)`,
          transform: `translateX(${this.state.x}px)`,
          width: this.state.width + 'px',
          ...style
        }}
      >
        { this.props.children }
      </div>
    )
  }
}

export default ColMatchItem
